<template>
  <div class="hello">
    <div v-if="username" class="chat">
      <ul>
        <li v-for="(item,i) in friends" :key="i" :class="{'active':clickFriendIndex==item.id}"
          @click="clickFriendIndex=item.id">
          {{item.name}}
        </li>
      </ul>
      <div>
        <div class="chatList">
          <template v-if="clickFriendIndex!=undefined">
            <div v-for="(item,i) in msgList[clickFriendIndex]" :key="i" class="msg">
              <div :class="[item.username == username?'self':'other']">{{item.msg}}</div>
            </div>
          </template>
        </div>
        <div class="send">
          <textarea maxlength="200" v-model="msg"></textarea>
          <button @click="send">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import io from 'socket.io-client'
  let socket;

  export default {
    name: 'HelloWorld',
    props: {
      username: String
    },
    data() {
      return {
        friends: [],
        person: [
          {
            id: '1',
            name: '张三'
          },
          {
            id: '2',
            name: '李四'
          },
          {
            id: '3',
            name: '王五'
          }
        ],
        msgList: {},
        msg: '',
        clickFriendIndex: undefined
      }
    },
    watch: {
      username(newName) {
        let person = JSON.parse(JSON.stringify(this.person))

        for (let i = 0; i < person.length; i++) {
          if (person[i].id == newName) {
            socket = io('http://127.0.0.1:3000?username=' + person[i].id);
            person.splice(i, 1)
            break
          }
        }
        this.friends = person

        socket.on('chat', data => {
          let { from, msg } = JSON.parse(data)
          if (!this.msgList[from]) this.msgList[from] = []
          let msgList = this.msgList
          msgList[from].push({
            username: from,
            msg: msg
          })
          this.msgList = Object.assign({},msgList)
        })
        socket.on('fail', (data) => {
          alert(data)
        })
      }
    },
    methods: {
      send() {
        let toId = this.clickFriendIndex
        if (toId == undefined) return alert('请先选择聊天对象')
        if (!this.msg) return alert('请输入信息内容')
        if (!this.msgList[toId]) this.msgList[toId] = []
        this.msgList[toId].push({
          username: this.username,
          msg: this.msg
        })
        socket.emit('chat', JSON.stringify({
          to: toId,
          msg: this.msg
        }))
        this.msg = ''
      }
    },
  }
</script>

<style scoped>
  .chat {
    border: 1px solid black;
    width: 800px;
    margin: 50px auto;
    display: flex;
    height: 500px;
  }

  .chat ul {
    list-style: none;
    border-right: 1px solid black;
    padding: 10px 0;
    margin: 0;
    width: 100px;
  }

  .chat ul li {
    text-align: center;
    padding: 10px 20px;
  }

  .chat ul li.active {
    background-color: skyblue;
  }

  .chat>div {
    width: 100%;
  }

  .chatList {
    height: 350px;
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid black;
    overflow-y: scroll;
  }

  .send {
    position: relative;
    box-sizing: border-box;
    height: 150px;
  }

  .send textarea {
    overflow: hidden;
    resize: none;
    width: 100%;
    box-sizing: border-box;
    height: 150px;
    border: none;
    outline: none;
    font-size: 18px;
    padding-bottom: 40px;
  }

  .send button {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .msg {
    overflow: hidden;
    margin: 0 10px;
  }

  .msg>div {
    border-radius: 10px;
    padding: 5px 10px;
    margin: 5px 0;
  }

  .self {
    float: right;
    background-color: rgba(143, 143, 143, 0.3);
    right: 10px;
  }

  .other {
    float: left;
    background-color: rgba(132, 220, 255, 0.3);
    left: 10px;
  }
</style>